<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		button {
			background-image: linear-gradient(#5187c4, #1c2f45);
			background-size: auto 200%;
			background-position: 0 100%;
			transition: background-position 0.5s;
			height: 500px;
			width: 500px;
		}
		
		button:hover {
			background-position: 0 0;
		}
		.qx{
			height: 100px;
			width: 600px;
			line-height: 100px;
			text-align: center;
			background: royalblue;
			color: white;
			transition: 1s;
		}
		.qx:hover{
			background: red;
			color: blue;
		}
		body{
			transition: 5s;
			
		}
		body:hover{
			transform:translateX(55deg);
		}
	</style>

	<body>
		<div class="qx">
			倾斜
		</div>
		<div id="img">
		</div>
		
		<button>开始卡卡卡卡</button>
	</body>
	<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$.ajax({
			type:"get",
			url:"http://192.168.10.101:8081/haiban-api/user/v1/userProvince",
			success:function(data){
				if(data.msg!="北京市"){
					$("#img").html("<img src='festival/upload/s2-i2.png'/>")
				}
				if(data.msg=="北京市"){
					$("#img").html("<img src='festival/upload/flower.png'/>")
				}
				if(data.msg=="天津"){
					$("#img").html("<img src='heng/img/a4.jpg'/>")
				}
			}
		});
	</script>
</html>